<template>
  <div class="audit-page">
    <!-- 搜索栏 -->
    <div class="search-bar">
      <input 
        type="text" 
        placeholder="请输入姓名/工号查询" 
        v-model="searchQuery"
      >
      <button class="search-btn">搜索</button>
    </div>

    <!-- 审核列表 -->
    <div class="audit-list">
      <!-- 审核项1 -->
      <div class="audit-item" :class="{ selected: isItemSelected(1) }">
        <input 
          type="checkbox" 
          :checked="isItemSelected(1)" 
          @change="handleItemChange(1, $event)" 
          class="item-checkbox"
        >
        <div class="audit-content">
          <div class="basic-info">
            <div class="avatar">
              <i class="fas fa-user"></i>
            </div>
            <div class="info-details">
              <div class="name-id">
                <span class="name">张辅导员</span>
                <span class="id">11004</span>
              </div>
              <p>所在单位: A学院</p>
              <p>辅导员类型: 专职辅导员</p>
              <p>辅导员职务: 副书记</p>
              <p>申请时间: 2025-03-01 00:00:00</p>
              <p>更新方式: 自主变更</p>
            </div>
            <button class="contact-btn">
              <i class="fas fa-phone"></i>
            </button>
          </div>

          <!-- 变更内容 -->
          <div class="change-content">
            <button class="expand-btn" @click="toggleExpand(1)">
              变更内容
              <i :class="expanded.includes(1) ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
            </button>
            
            <!-- 展开的变更详情 -->
            <div class="change-details" v-if="expanded.includes(1)">
              <div class="change-item">
                <span class="label">联系电话:</span>
                <span class="old-value">原: 13800000000</span>
                <span class="new-value">新: 13900000000</span>
              </div>
              <div class="change-item">
                <span class="label">电子邮箱:</span>
                <span class="old-value">原: old@example.com</span>
                <span class="new-value">新: new@example.com</span>
              </div>

              <!-- 证明材料图片区域 -->
              <div class="proof-section">
                <h3>证明材料</h3>
                <div class="image-grid">
                  <!-- 已有的图片 -->
                  <div 
                    class="image-item" 
                    v-for="(img, index) in proofImages1" 
                    :key="index"
                    @click="previewImage(img.url, img.alt)"
                  >
                    <img :src="img.url" :alt="img.alt" class="proof-image">
                    <button 
                      class="delete-img" 
                      @click.stop="deleteImage(1, index)"
                    >
                      <i class="fas fa-times"></i>
                    </button>
                  </div>
                  
                  <!-- 添加图片按钮 -->
                  <label class="add-image-btn" for="image-upload-1">
                    <i class="fas fa-plus"></i>
                    <input 
                      type="file" 
                      id="image-upload-1" 
                      accept="image/*" 
                      @change="handleImageUpload($event, 1)"
                      class="image-upload"
                    >
                  </label>
                </div>
              </div>
            </div>
          </div>

          <!-- 审核按钮 -->
          <button class="approve-btn" @click="handleApprove(1)">审核通过</button>
        </div>
      </div>

      <!-- 审核项2 -->
      <div class="audit-item" :class="{ selected: isItemSelected(2) }">
        <input 
          type="checkbox" 
          :checked="isItemSelected(2)" 
          @change="handleItemChange(2, $event)" 
          class="item-checkbox"
        >
        <div class="audit-content">
          <div class="basic-info">
            <div class="avatar">
              <i class="fas fa-user"></i>
            </div>
            <div class="info-details">
              <div class="name-id">
                <span class="name">李辅导员</span>
                <span class="id">11005</span>
              </div>
              <p>所在单位: B学院</p>
              <p>辅导员类型: 专职辅导员</p>
              <p>辅导员职务: 学工办主任</p>
              <p>申请时间: 2025-03-02 00:00:00</p>
              <p>更新方式: 系统变更</p>
            </div>
            <button class="contact-btn">
              <i class="fas fa-phone"></i>
            </button>
          </div>

          <!-- 变更内容 -->
          <div class="change-content">
            <button class="expand-btn" @click="toggleExpand(2)">
              变更内容
              <i :class="expanded.includes(2) ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
            </button>
            
            <!-- 展开的变更详情 -->
            <div class="change-details" v-if="expanded.includes(2)">
              <div class="change-item">
                <span class="label">办公地址:</span>
                <span class="old-value">原: 行政楼301</span>
                <span class="new-value">新: 行政楼402</span>
              </div>
              <div class="change-item">
                <span class="label">分管工作:</span>
                <span class="old-value">原: 学生管理</span>
                <span class="new-value">新: 学生管理、就业指导</span>
              </div>

              <!-- 证明材料图片区域 -->
              <div class="proof-section">
                <h3>证明材料</h3>
                <div class="image-grid">
                  <!-- 已有的图片 -->
                  <div 
                    class="image-item" 
                    v-for="(img, index) in proofImages2" 
                    :key="index"
                    @click="previewImage(img.url, img.alt)"
                  >
                    <img :src="img.url" :alt="img.alt" class="proof-image">
                    <button 
                      class="delete-img" 
                      @click.stop="deleteImage(2, index)"
                    >
                      <i class="fas fa-times"></i>
                    </button>
                  </div>
                  
                  <!-- 添加图片按钮 -->
                  <label class="add-image-btn" for="image-upload-2">
                    <i class="fas fa-plus"></i>
                    <input 
                      type="file" 
                      id="image-upload-2" 
                      accept="image/*" 
                      @change="handleImageUpload($event, 2)"
                      class="image-upload"
                    >
                  </label>
                </div>
              </div>
            </div>
          </div>

          <!-- 审核按钮 -->
          <button class="approve-btn" @click="handleApprove(2)">审核通过</button>
        </div>
      </div>
    </div>

    <!-- 批量操作栏 -->
    <div class="batch-operation">
      <!-- 批量拒绝按钮 -->
      <button class="batch-btn batch-reject" :disabled="selectedCount === 0" @click="handleBatchReject">
        批量拒绝
      </button>
      
      <!-- 全选功能按钮 -->
      <button class="batch-btn batch-select-all" @click="handleSelectAllBtnClick">
        {{ selectAll ? '取消全选' : '全选' }}
      </button>
      
      <!-- 全选复选框（已删除"全选"文字） -->
      <label class="select-all">
        <input 
          type="checkbox" 
          :checked="selectAll" 
          @change="handleSelectAllChange($event)"
          class="all-checkbox"
        >
      </label>
      
      <!-- 批量审核按钮 -->
      <button class="batch-btn batch-approve" :disabled="selectedCount === 0" @click="handleBatchApprove">
        批量审核
      </button>
    </div>

    <!-- 图片预览弹窗 -->
    <div class="image-preview" v-if="showPreview" @click="closePreview">
      <div class="preview-content" @click.stop>
        <button class="close-preview" @click="closePreview">
          <i class="fas fa-times"></i>
        </button>
        <img :src="previewImageUrl" :alt="previewImageAlt" class="preview-img">
      </div>
    </div>

    <!-- 审核结果弹窗 -->
    <div class="result-popup" v-if="showResultPopup">
      <div class="popup-content">
        <div class="popup-icon" :class="popupIconClass">
          <i :class="popupIcon"></i>
        </div>
        <div class="popup-text">{{ resultPopupText }}</div>
        <button class="popup-confirm" @click="closeResultPopup">确定</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索查询
      searchQuery: '',
      
      // 所有可选择的项目ID
      allItemIds: [1, 2],
      
      // 展开状态管理
      expanded: [],
      
      // 选择状态管理
      selectedItems: {},
      selectAll: false,
      
      // 图片预览状态
      showPreview: false,
      previewImageUrl: '',
      previewImageAlt: '',
      
      // 审核结果弹窗状态
      showResultPopup: false,
      resultPopupText: '',
      popupIcon: '',
      popupIconClass: '',
      
      // 证明材料图片 - 审核项1
      proofImages1: [
        {
          url: '',
          alt: '身份证明材料'
        },
        {
          url: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/afbaed007db047e4a42c4ebb68daf81c.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1758631494&x-signature=MQds8GItxAJI16YAKyBOIYV7dk8%3D',
          alt: '工作证明'
        }
      ],
      
      // 证明材料图片 - 审核项2
      proofImages2: [
        {
          url: 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/5a053268af17442185e58ac357fe6a15.png~tplv-a9rns2rl98-24:720:720.png?rk3s=1fb89129&x-expires=1758631803&x-signature=Gb6OCFZ8OrTCb5tmxP7BBjrYyBQ%3D',
          alt: '岗位调整通知'
        }
      ]
    };
  },
  methods: {
    // 检查项目是否被选中
    isItemSelected(itemId) {
      return this.selectedItems[itemId] === true;
    },
    
    // 切换展开/收起状态
    toggleExpand(itemId) {
      if (this.expanded.includes(itemId)) {
        this.expanded = this.expanded.filter(id => id !== itemId);
      } else {
        this.expanded.push(itemId);
      }
    },
    
    // 处理单个项目选择变化
    handleItemChange(itemId, event) {
      this.$set(this.selectedItems, itemId, event.target.checked);
      this.checkAllSelected();
    },
    
    // 处理全选框变化
    handleSelectAllChange(event) {
      const isChecked = event.target.checked;
      this.selectAll = isChecked;
      
      this.allItemIds.forEach(itemId => {
        this.$set(this.selectedItems, itemId, isChecked);
      });
    },
    
    // 处理全选按钮点击
    handleSelectAllBtnClick() {
      // 切换全选状态
      this.selectAll = !this.selectAll;
      
      // 更新所有项目的选择状态
      this.allItemIds.forEach(itemId => {
        this.$set(this.selectedItems, itemId, this.selectAll);
      });
    },
    
    // 检查是否所有项目都被选中
    checkAllSelected() {
      const allSelected = this.allItemIds.every(itemId => {
        return this.selectedItems[itemId] === true;
      });
      
      this.selectAll = allSelected;
    },
    
    // 预览图片
    previewImage(url, alt) {
      this.previewImageUrl = url;
      this.previewImageAlt = alt;
      this.showPreview = true;
      document.body.style.overflow = 'hidden';
    },
    
    // 关闭图片预览
    closePreview() {
      this.showPreview = false;
      this.previewImageUrl = '';
      this.previewImageAlt = '';
      document.body.style.overflow = '';
    },
    
    // 处理图片上传
    handleImageUpload(event, itemId) {
      const file = event.target.files[0];
      if (!file) return;
      
      const validTypes = ['image/jpeg', 'image/png', 'image/gif'];
      if (!validTypes.includes(file.type)) {
        alert('请上传JPG、PNG或GIF格式的图片');
        return;
      }
      
      if (file.size > 5 * 1024 * 1024) {
        alert('图片大小不能超过5MB');
        return;
      }
      
      const reader = new FileReader();
      reader.onload = (e) => {
        const newImage = {
          url: e.target.result,
          alt: file.name
        };
        
        if (itemId === 1) {
          this.proofImages1.push(newImage);
        } else {
          this.proofImages2.push(newImage);
        }
        
        event.target.value = '';
      };
      reader.readAsDataURL(file);
    },
    
    // 删除图片
    deleteImage(itemId, index) {
      if (confirm('确定要删除这张图片吗？')) {
        if (itemId === 1) {
          this.proofImages1.splice(index, 1);
        } else {
          this.proofImages2.splice(index, 1);
        }
      }
    },
    
    // 单个审核通过
    handleApprove(itemId) {
      console.log(`审核项 ${itemId} 通过`);
      this.showResult('success', '已通过');
    },
    
    // 批量审核通过
    handleBatchApprove() {
      const selectedIds = this.allItemIds.filter(itemId => this.selectedItems[itemId]);
      console.log(`批量审核通过: ${selectedIds.join(',')}`);
      this.showResult('success', `已批量通过 ${selectedIds.length} 项审核`);
    },
    
    // 批量拒绝
    handleBatchReject() {
      const selectedIds = this.allItemIds.filter(itemId => this.selectedItems[itemId]);
      console.log(`批量拒绝: ${selectedIds.join(',')}`);
      this.showResult('error', `已批量拒绝 ${selectedIds.length} 项审核`);
    },
    
    // 显示结果弹窗
    showResult(type, text) {
      this.resultPopupText = text;
      
      if (type === 'success') {
        this.popupIcon = 'fas fa-check-circle';
        this.popupIconClass = 'success';
      } else {
        this.popupIcon = 'fas fa-times-circle';
        this.popupIconClass = 'error';
      }
      
      this.showResultPopup = true;
    },
    
    // 关闭结果弹窗
    closeResultPopup() {
      this.showResultPopup = false;
      this.resultPopupText = '';
      this.popupIcon = '';
      this.popupIconClass = '';
    }
  },
  computed: {
    // 获取所有选中的项目数量
    selectedCount() {
      return this.allItemIds.filter(itemId => this.selectedItems[itemId]).length;
    }
  },
  created() {
    // 初始化选中状态
    this.allItemIds.forEach(itemId => {
      this.$set(this.selectedItems, itemId, false);
    });
  }
};
</script>

<style scoped>
/* 基础样式 */
.audit-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120px;
}

/* 搜索栏 */
.search-bar {
  padding: 12px 16px;
  background-color: #fff;
  display: flex;
  gap: 0;
}

.search-bar input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  outline: none;
}

.search-bar input:focus {
  border-color: #ff4d4f;
}

.search-btn {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 0 18px;
  border-radius: 0 4px 4px 0;
  font-weight: 500;
  cursor: pointer;
}

/* 审核列表 */
.audit-list {
  padding: 10px 16px;
}

.audit-item {
  background-color: #fff;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.audit-item.selected {
  border: 1px solid #ff4d4f;
}

.item-checkbox {
  margin: 3px 10px 0 0;
  width: 18px;
  height: 18px;
  accent-color: #ff4d4f;
  cursor: pointer;
}

.audit-content {
  flex: 1;
}

/* 基本信息 */
.basic-info {
  display: flex;
  align-items: flex-start;
}

.avatar {
  width: 40px;
  height: 40px;
  background-color: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  margin-right: 10px;
}

.info-details {
  flex: 1;
}

.name-id {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.name {
  font-weight: 600;
  font-size: 16px;
  margin-right: 10px;
}

.id {
  font-size: 14px;
  color: #666;
  background-color: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.info-details p {
  margin: 3px 0;
  font-size: 14px;
  color: #333;
}

.contact-btn {
  background: none;
  border: none;
  color: #ff4d4f;
  font-size: 20px;
  cursor: pointer;
}

/* 变更内容 */
.change-content {
  margin-top: 15px;
}

.expand-btn {
  width: 100%;
  background-color: #f5f5f5;
  border: none;
  padding: 10px 15px;
  border-radius: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.change-details {
  margin-top: 10px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.change-item {
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #eee;
}

.change-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.label {
  display: inline-block;
  width: 80px;
  font-weight: 500;
  color: #666;
}

.old-value {
  color: #999;
  text-decoration: line-through;
  margin-right: 10px;
}

.new-value {
  color: #ff4d4f;
}

/* 证明材料图片样式 */
.proof-section {
  margin-top: 15px;
}

.proof-section h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #333;
  font-weight: 600;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.image-item {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
}

.proof-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.delete-img {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgba(255, 77, 79, 0.9);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.add-image-btn {
  width: 80px;
  height: 80px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  cursor: pointer;
  font-size: 20px;
}

.image-upload {
  display: none;
}

/* 审核按钮 */
.approve-btn {
  width: 100%;
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 10px;
  border-radius: 4px;
  margin-top: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.approve-btn:hover {
  background-color: #f5222d;
}

/* 批量操作栏 */
.batch-operation {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  gap: 15px;
}

/* 批量操作按钮样式 */
.batch-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  font-size: 14px;
}

/* 批量拒绝按钮 */
.batch-reject {
  background-color: #1890ff;
  color: white;
}

.batch-reject:disabled {
  background-color: #b3d4fc;
  cursor: not-allowed;
}

/* 全选按钮样式 */
.batch-select-all {
  background-color: #666;
  color: white;
}

/* 全选样式 */
.select-all {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  margin-right: auto;
}

.all-checkbox {
  margin-right: 8px;
  width: 16px;
  height: 16px;
  accent-color: #ff4d4f;
}

/* 批量审核按钮 */
.batch-approve {
  background-color: #ff4d4f;
  color: white;
}

.batch-approve:disabled {
  background-color: #ffcccc;
  cursor: not-allowed;
}

/* 图片预览弹窗 */
.image-preview {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.preview-content {
  position: relative;
  max-width: 90%;
  max-height: 90%;
}

.preview-img {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 4px;
}

.close-preview {
  position: absolute;
  top: -30px;
  right: -30px;
  background: none;
  border: none;
  color: white;
  font-size: 24px;
  cursor: pointer;
}

/* 审核结果弹窗样式 */
.result-popup {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
}

.popup-content {
  background-color: white;
  border-radius: 8px;
  padding: 30px 20px;
  width: 80%;
  max-width: 300px;
  text-align: center;
}

.popup-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
}

.popup-icon.success {
  background-color: #f6ffed;
  color: #52c41a;
}

.popup-icon.error {
  background-color: #fff2f0;
  color: #f5222d;
}

.popup-text {
  font-size: 16px;
  margin-bottom: 20px;
  color: #333;
}

.popup-confirm {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
}
</style>
